<template>
  <div class="star" :class="starType">
      <span v-for="(itemClass, i) in itemClasss" :key="i" :class="itemClass" class="star-item"></span>
  </div>
</template>

<script>
export default {
  name: 'star',
  data () {
    return {
        length: 5,
        on: 'on',
        off: 'off',
        half: 'half'
    };
  },
  props: ['size', 'score'],
  methods: {},
  computed: {
      starType () {
        return 'star-' + this.size;
      },
      itemClasss () {
        let arr = [];
        let score = Math.floor(this.score * 2) / 2;
        let hasDecimal = score % 1 !== 0;
        let integer = Math.floor(score);
        for (let i = 0; i < integer; i++) {
            arr.push(this.on);
        }
        if (hasDecimal) arr.push(this.half);
        while (arr.length < this.length) arr.push(this.off);
        return arr;
      }
  }
};
</script>

<style lang="less" scoped>
@import '../../common/stylus/mixin';

.star{
    font-size: 0;
    .star-item{
        display: inline-block;
        background-repeat: no-repeat;
    }
    &.star-48{
        .star-item{
            width: 20px;
            height: 20px;
            margin-right: 22px;
            background-size: 20px 20px;
            &:last-child{
                margin-right: 0;
            }
            &.on{
                .bg-image('../../components/star/img/star48_on');
            }
            &.half{
                .bg-image('../../components/star/img/star48_half');
            }
            &.off{
                .bg-image('../../components/star/img/star48_off');
            }
        }
    }
    &.star-36{
        .star-item{
            width: 15px;
            height: 15px;
            margin-right: 6px;
            background-size: 15px 15px;
            &:last-child{
                margin-right: 0;
            }
            &.on{
                .bg-image('../../components/star/img/star36_on');
            }
            &.half{
                .bg-image('../../components/star/img/star36_half');
            }
            &.off{
                .bg-image('../../components/star/img/star36_off');
            }
        }
    }
    &.star-24{
        .star-item{
            width: 10px;
            height: 10px;
            margin-right: 3px;
            background-size: 10px 10px;
            &:last-child{
                margin-right: 0;
            }
            &.on{
                .bg-image('../../components/star/img/star24_on');
            }
            &.half{
                .bg-image('../../components/star/img/star24_half');
            }
            &.off{
                .bg-image('../../components/star/img/star24_off');
            }
        }
    }
}
</style>
